<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>托管费用</title>
    <link rel="stylesheet" href="../../css/basic.css">
    <style type="text/css">
        /*以下为支付弹框*/
        .pwd-box input[type="tel"]{
            width: 99%;
            height: 0.8rem;
            color: transparent;
            position: absolute;
            top: 0;
            left: 0;
            border: none;
            font-size: 0.25rem;
            opacity: 0;
            z-index: 1;
            letter-spacing: 0.636rem;
        }
        .fake-box input{
            border-bottom: 1px solid black;
            float: left;
            z-index: 99999;
            width: 0.8rem;
            height: 0.8rem;
            border-right: 1px solid black;
            text-align: center;
            font-size: 0.25rem;
            border-top: 1px solid black;
        }
        .fake-box input:first-child{
            border-top-left-radius: 0.2rem;
            border-left: 1px solid black;
            border-bottom-left-radius: 0.2rem;
        }
        .fake-box input:last-child{
            border-top-right-radius: 0.2rem;
            border-right: 1px solid black;
            border-bottom-right-radius: 0.2rem;
        }

        /*以下为主页*/
        .pay-info-area{
            padding-top: 0.5rem;
            height: auto;
            width: 90%;
            margin: auto;
        }
        .pay-ul ul{
            /*background-color: #00a0e9;*/
        }
        .pay-ul li{
            position: relative;
            height: 1.2rem;
            width: 100%;
            border-bottom: 1px solid #e3e3e3;
        }
        .li-type{
            line-height: 1.6rem;
            display: block;
            color: #363636;
            font-size: 0.28rem;
            height: 100%;
            width: 18%;
            left: 0;
        }
        .input-area{
            color: #666;
            background-color: transparent;
            font-size: 0.28rem;
            width: 76%;
            position: absolute;
            right: 0;
            bottom: 0.15rem;
            height: 0.5rem;
            padding-left: 6%;
            outline: none;
        }
        .agreement a{
            position: absolute;
            left: 0.5rem;
            top: 0.1rem;
            color: #666;
            font-size: 0.28rem;
        }
        .addMoney-btn-area{
            width: 50%;
            height: 0.8rem;
            margin: 0.8rem auto;
        }
        .addMoney-btn{
            height: 100%;
            width: 100%;
            background-color: #F23A38;
            border-radius: 10px;
            outline: none;
            color: white;
            font-size: 0.28rem;
        }
        /*以下为优惠券*/
        .cunPonList{
            padding-top: 0.3rem;
            width: 100%;
            height:auto;
            overflow: hidden;
            padding-bottom: 0.3rem;
        }
        .cunPonList li{
            float: left;
            width: 36%;
            margin: 0 6%;
            height:1.2rem;
            border: 1px solid  #ADADAD;
            position: relative;
        }
        .used,.use{
            width: 100%;
            height: 100%;
            position: relative;
            display: inline-block;
        }
        .used{color: #363636;}
        .use{color: #F23A38}
        .use .try-cunPon{background-color: #F23A38}
        .use .money-type{left: 0.1rem}
        .use .money-num{left: 0.3rem}
        .money-type{
            font-size: 0.25rem;
            position: absolute;
            bottom: 0.3rem;
            left: 0.2rem;
        }
        .money-num{
            position: absolute;
            font-size: 0.7rem;
            bottom: 0.18rem;
            left: 0.5rem;
        }
        .try-cunPon{
            padding: 0 0.1rem;
            background-color: #363636;
            color: white;
            font-size: 0.25rem;
            position: absolute;
            right: 0.3rem;
            top: 0.2rem;
        }
        .font-cunPon{
            position: absolute;
            bottom: 0.3rem;
            font-size: 0.23rem;
            right: 0.3rem;
        }
        /*新增弹框支付*/
        .box{
            left: 0.8rem;
            background: #fff;
            text-align: center;
            position: fixed;
            top: 2rem;
        }
        #ipt{
            margin: 0;
            padding: 0;
            width: 1px;
            opacity: 0;
            height: 1px;
            border: none;
        }
        .pwdLabel{
            display: block;
        }
        .pwdUL{
            border: 1px solid #c8c8c8;
            display: inline-block;
            position: relative;
            border-radius: 0.15rem;
        }
        .pwdUL li{
            display: inline-block;
            width: 0.8rem;
            height: 0.8rem;
            font-size: 0.25rem;
            font-weight: 700;
            text-align: center;
            line-height: 0.8rem;
            border-left: 1px solid #e6e6e6;
            vertical-align: middle;
            overflow: hidden;
        }
        .pwdUL li:first-child {
            border-left: none;
        }
        em{
            font-style: normal;
            color: #ff6600
        }
        .limitOver{
            margin: auto;
            height: 0px;
            width: 0px;
            overflow: hidden;
        }
        .layer-area{
            width: 100%;
            height: 100%;
            position: fixed;
            top:0;
            background-color: black;
            opacity: 0.5;
        }
        .closePayModal{
            display: inline-block;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 0.7rem;
            width: 0.5rem;
            height: 0.5rem;
            line-height: 0.5rem;
            text-align: center;
        }
        .hideDom{
            display: none;
        }
        .inputPwdArea{
            line-height: 1rem;
            font-size: 0.28rem;
        }
        .prompt-error{
            color: #F23A38;
            line-height: 1rem;
            font-size: 0.28rem;
        }
        /*END*/
    </style>
    <script src="../../lib/basicSize.js"></script>
</head>
<body>
<!--导航-->
<div class="top-nav-area">
    <ul>
        <a class="back-a" href="javascript:history.back(-1)"></a>
        <li>托管费用</li>
    </ul>
</div>
<div class="main-body-area">
    <div class="pay-info-area">
        <ul class="pay-ul">
            <li>
                <span class="li-type">托管金额</span>
                <input class="input-area" readonly type="text" value="100.00">
            </li>
            <li>
                <span class="li-type">实际支付</span>
                <input class="input-area" readonly type="text" value="90.00">
            </li>
            <li style="border-bottom: none;">
                <span class="li-type" style="width: 100%">可用优惠券</span>
            </li>
        </ul>
    </div>
    <ul class="cunPonList">
        <li>
            <a href="#" class="used">
                <span class="money-type">￥</span>
                <span class="money-num">5</span>
                <span class="try-cunPon">点击使用</span>
                <span class="font-cunPon">无门槛优惠</span>
            </a>
        </li>
        <li>
            <a href="#" class="use">
                <span class="money-type">￥</span>
                <span class="money-num">10</span>
                <span class="try-cunPon">点击使用</span>
                <span class="font-cunPon">无门槛优惠</span>
            </a>
        </li>
    </ul>
    <div class="addMoney-btn-area">
        <button class="addMoney-btn focused">托管</button>
    </div>
</div>



<div class="layer-area hideDom"></div>
<div class="box hideDom">
    <div class="limitOver">
        <span class="closePayModal">×</span>
        <span class="inputPwdArea">请输入钱包密码</span>
        <label class="pwdLabel" for="ipt">
            <ul class="pwdUL">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </label>
        <input type="tel" id="ipt" maxlength="6">
        <span class="prompt-error">输入错误，请重新输入</span>
        <div class="show" style="display: none"><em></em></div>
    </div>
</div>
<script src="../../lib/jquery/jquery.min.js"></script>
<script>
//    密码为$('em').text()
    $(document).ready(function () {
        var limitOver = $('.limitOver');
        $('.focused').click(function () {
            $('.layer-area').show();
            $('.box').show();
            limitOver.width('6rem');
            limitOver.height('3rem');
            $('#ipt').focus();
        });
        $('.closePayModal').click(function () {
            $('.box').hide();
            limitOver.width('0rem');
            limitOver.height('0rem');
            $('.layer-area').hide();
            //初始化
            $('#ipt').val("");
            $('.pwdUL li').text('');
            $('em').text('');
        });
        $('.layer-area').click(function () {
            alert("3")
        })
    })
</script>
<script>
    $('input').on('input', function (e){
        var numLen = 6;
        var pw = $('#ipt').val();
        var list = $('.pwdUL li');
        $('em').text($('#ipt').val());
        for(var i=0; i<numLen; i++){
            if(pw[i]){
                $(list[i]).text('*');
            }else{
                $(list[i]).text('');
            }
        }
        if($('em').text().length == 6){//触发支付事件
            console.log($('em').text())
        }

    });
</script>

</body>
</html>